<template>
  <div class="map-container">
    <div id="baidu-map" ref="mapContainer"></div>
  </div>
</template>

<script>
export default {
  name: 'BaiduOfflineMap',
  props: {
    // 中心坐标
    center: {
      type: Object,
      default: () => ({ lng: 116.404, lat: 39.915 })
    },
    // 缩放级别
    zoom: {
      type: Number,
      default: 15
    }
  },
  data() {
    return {
      map: null
    }
  },
  mounted() {
    // 确保DOM加载完成后初始化地图
    this.initMap()
  },
  methods: {
    initMap() {
      // 动态加载离线API
      const script = document.createElement('script')
      script.src = 'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=N4gTQPuEbQg834nGTxn4L5qLuBgGnQcg'
      script.onload = () => {
        // 确保 BMapGL 已加载
        if (typeof window.BMapGL !== 'undefined') {
          this.createMap()
        } else {
          console.error('BMapGL not loaded')
        }
      }
      script.onerror = () => {
        console.error('Failed to load Baidu Map API')
      }
      document.body.appendChild(script)
    },

    createMap() {
      // 检查 BMapGL 是否可用
      if (typeof window.BMapGL === 'undefined') {
        console.error('BMapGL is not available')
        return
      }

      // 初始化地图实例
      this.map = new window.BMapGL.Map(this.$refs.mapContainer)

      // 设置中心点坐标
      const point = new window.BMapGL.Point(this.center.lng, this.center.lat)

      // 初始化地图，设置中心点和缩放级别
      this.map.centerAndZoom(point, this.zoom)

      // 添加地图控件
      this.map.addControl(new window.BMapGL.NavigationControl())  // 缩放控件
      this.map.addControl(new window.BMapGL.ScaleControl())       // 比例尺控件
      this.map.addControl(new window.BMapGL.OverviewMapControl()) // 缩略图控件

      // 允许鼠标滚轮缩放
      this.map.enableScrollWheelZoom(true)

      // 触发地图加载完成事件
      this.$emit('map-ready', this.map)
    }
  },
  beforeUnmount() {
    // 销毁地图实例，释放资源
    if (this.map) {
      this.map.destroy()
    }
  }
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
}

#baidu-map {
  width: 100%;
  height: 600px;
  /* 可根据需要调整高度 */
}
</style>
